<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:v-bind="http://www.w3.org/1999/xhtml"
	xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="description" content="速用视频中心">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>suyong</title>
<link rel="stylesheet" href="/js/movie/csss/bootstrap.min.css">
<link rel="stylesheet" href="/js/movie/csss/flexslider.css">
<link rel="stylesheet" href="/js/movie/csss/jquery.fancybox.css">
<link rel="stylesheet" href="/js/movie/csss/main.css">
<link rel="stylesheet" href="/js/movie/csss/responsive.css">
<link rel="stylesheet" href="/js/movie/csss/animate.min.css">
<link rel="stylesheet" href="/js/movie/csss/font-icon.css">
<link rel="stylesheet" href="/js/movie/csss/font-awesome.min.css">
<link rel="stylesheet" href="/js/movie/csss/audio.css">
<link rel="stylesheet" href="/js/movie/csss/index.css" />
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
} /*非常重要的样式让背景图片100%适应整个屏幕*/
.my-navbar {
	padding: 20px 10%;
	transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}

.my-navbar a {
	background: transparent !important;
	color: white !important;
	font-size: 2rem !important;
}

.my-navbar a:hover {
	color: #3bc492 !important;
	background: transparent;
	outline: none;
}
/*outline设置四个边框的样式 outline-color 设置颜色  outline-width设置宽度 outline-style设置边框的类型*/
.wordtitle {
	font-size: 3rem !important;
}

.my-navbar a {
	transition: color 0.5s ease-in-out;
} /*-webkit-transition ;-moz-transition*/
.top-nav {
	padding: 20px 10%;
	background: rgba(0, 0, 0, 0.4);
	color: #3bc492
}
/*button.navbar-toggle {background-color:#FFF;}!*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*!*/
button.navbar-toggle>span.icon-bar {
	background-color: #3bc492
}

.navbar-nav>li>.dropdown-menu {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: rgba(205, 175, 149, 0.4);
}

@media screen and (max-width: 767px) {
	.my-navbar {
		padding: 0;
		transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
		background: rgba(0, 0, 0, 0.4)
	}
	.wordtitle {
		font-size: 2rem !important;
		color: #3bc492
	}
	.flexslider {
		padding-bottom: 5px;
	}
}

.silder-main-img img {
	width: 100%;
	height: 300px;
}
</style>

</head>
<!--#d0e9c6-->
<body>
	<section class="banner" role="banner">
		<header role="banner" id="app">
			<div class="container">
				<nav class="navbar  navbar-fixed-top my-navbar" role="navigation">
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle"
								data-toggle="collapse" data-target="#navbar">
								<span class="sr-only">切换导航</span> <span class="icon-bar"></span>
								<span class="icon-bar"></span> <span class="icon-bar"></span>
							</button>
							<span class="navbar-brand wordtitle" href="#">速用视频中心</image></span>
						</div>
						<div class="collapse navbar-collapse" id="navbar">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown"> <span>视频<b class="caret"></b></span>
								</a> <!--  <ul class="dropdown-menu" style="left: 0;">
                                <li><a href="#">视频1</a></li>
                                <li><a href="#">视频2</a></li>
                                <li><a href="#">视频3</a></li>
                                <li class="divider"></li>
                            </ul> --></li>
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown"> <!--<img src="./images/music.png" width="32rem" height="25rem">-->
										<span>音频<b class="caret"></b></span>
								</a> <!-- <ul class="dropdown-menu" style="left: 0;">
                                <li><a href="#">音频1</a></li>
                                <li><a href="#">音频2</a></li>
                                <li><a href="#">音频3</a></li>
                                <li class="divider"></li>
                            </ul> --></li>
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown"> <!--<img src="./images/other.png" width="32rem" height="25rem">-->
										<span>其他<b class="caret"></b></span>
								</a> <!-- <ul class="dropdown-menu" style="left: 0;">
                                <li><a href="#">其他1</a></li>
                                <li><a href="#">其他2</a></li>
                                <li><a href="#">其他3</a></li>
                                <li class="divider"></li>
                            </ul> --></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</header>
	</section>

	<div id="wrapper">
		<div class="js-silder">
			<div class="silder-scroll">			
		       <div class="silder-main" style="height: 200px">
					<div class="silder-main-img">
						   <img alt="" src="/img/bg1.jpg">
				     </div>
				     <div class="silder-main-img">
						   <img alt="" src="/img/bg2.jpg">
				     </div>
				     <div class="silder-main-img">
						   <img alt="" src="/img/bg3.jpg">
				     </div>
             </div>				
			</div>
			<div class="js-silder-ctrl"></div>
		</div>
		<section id="works" class="works section no-padding">
			<div class="container-fluid containeritem">
				<div class="row no-gutter" id="div" style="">
					<div class="col-lg-4 col-md-6 col-sm-3 work img-list"
						v-for="mv in rows">
						<a class="" v-bind:href="mv.src">
							<div class="outdiv">
								<img alt="" v-bind:src="mv.picture">
							</div>
						</a> <span class="triangle"></span> <span
							style="color: #000000; text-align: center; display: block; margin-top: 5px;">{{mv.title}}</span>
					</div>

				</div>
			</div>
		</section>
	</div>
	<!-- portfolio section -->
	<!-- footer -->
	<footer class="section footer">
		<div class="footer-bottom">
			<div class="container">
				<div class="col-md-12">
					<p>
					<ul class="footer-share">
					</ul>
					</p>
					<p>2018速用科技.粤ICP备17075092号</p>
					<br>

				</div>
			</div>
		</div>
	</footer>
	<!-- footer -->
	<!-- JS FILES -->
	<script src="/js/movie/jss/jquery.min.js"></script>
	<script src="/js/movie/jss/bootstrap.min.js"></script>
	<script src="/js/movie/jss/jquery.flexslider-min.js"></script>
	<script src="/js/movie/jss/jquery.fancybox.pack.js"></script>
	<script src="/js/movie/jss/jquery.waypoints.min.js"></script>
	<script src="/js/movie/jss/retina.min.js"></script>
	<script src="/js/movie/jss/modernizr.js"></script>
	<!--<script src="../js/main.js"></script>-->
	<script src="/js/movie/jss/index.js"></script>
	<script src="/js/movie/jss/wySilder.js" type="text/javascript"></script>
	<!-- vue -->
	<script type="text/javascript" src="/js/movie/jss/vue.min.js"></script>
	<script type="text/javascript">
		var wrapper = new Vue({
			el : '#wrapper',
			data : {
				rows : [],
				prows : []
			},
			methods : {
				notify : function() {
					$.getJSON('/loa/tbMedia', function(r) {
						wrapper.rows = r.rows;
						wrapper.prows = r.prows;
					});
				},
				enterSearch : function(e) {
					console.log(111);
					console.log(e);
				}
			},
			created : function() {
				this.notify()
			}
		})

		$(function() {
			$(".js-silder").silder({
				auto : true,//自动播放，传入任何可以转化为true的值都会自动轮播
				speed : 25,//轮播图运动速度
				sideCtrl : false,//是否需要侧边控制按钮
				defaultView : 0,//默认显示的索引
				interval : 3000,//自动轮播的时间，以毫秒为单位，默认3000毫秒
				activeClass : "active",//小的控制按钮激活的样式，不包括作用两边，默认active
			});
		});
	</script>


</body>
</html>

